<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 遍历数组 -->
        <h3>学生列表</h3>
        <ul>
            <li v-for="stu in students">
                {{stu.id}}-{{stu.name}}-{{stu.age}}
            </li>
        </ul>


        <h3>学生列表</h3>
        <ul>
            <li v-for="stu of students">
                {{stu.id}}-{{stu.name}}-{{stu.age}}
            </li>
        </ul>

        <h3>学生列表</h3>
        <ul>
            <li v-for="(stu,j) in students" :key="j">
                {{stu.id}}-{{stu.name}}-{{stu.age}}-{{j}}
            </li>
        </ul>

        <!-- 遍历对象 -->
        <ul>
            <li v-for="(c,k) in car" :key="k">
                {{c}}-{{k}}
            </li>
        </ul>

        <!-- 遍历字符串 -->
        <ul>
            <li v-for="(c,k) in str" :key="k">
                {{c}}-{{k}}
            </li>
        </ul>

        <!-- 遍历输出0 -10  固定次数-->
        <h1 v-for="(i,index) in 10" :key="index">
            {{i}}-{{index}}
        </h1>



    </div>

</body>

</html>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                /* 数组 */
                students: [
                    { id: '001', name: '张三', age: 18 },
                    { id: '002', name: '李四', age: 19 },
                    { id: '003', name: '王五', age: 20 }
                ],
                /* 对象 */
                car: {
                    name: 'RS7',
                    price: '200万',
                    color: '红色'
                },
                str: 'HelloWorld'

            }
        },


    })

</script>